
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <link rel="stylesheet" href="./../../libs/ol/ol.css">
    <script src="./../../libs/ol/ol.js"></script>
    <style>
        .tit {
            position: absolute; z-index: 100; width: 100%;margin-top: 42px;
        }
        .tit span {
            width: 50%;float: left;text-align: center;background: #eb060657;color: #fff; line-height: 60px; font-size: 24px;
        }
    </style>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map3" style="margin: 0 auto; width: 50%; height: 100%;float: left;"></div>
    <div id="map2" style="margin: 0 auto; width: 50%; height: 100%; float: left;"></div>
    <div class="tit">
        <span>三维（Cesium）</span>
        <span>二维（openlayers）</span>
    </div>
    <script type="text/javascript">
        // 三维
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map3', {});
        viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url: 'http://data.mars3d.cn/terrain'
        });
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(110, 40, 10000),
        });

        // 二维
        const map = new ol.Map({
            target: 'map2',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        "url": '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
                    })
                })
            ],
            view: new ol.View({
                projection: ol.proj.get('EPSG:4326'),
                center: [110, 40],
                zoom: 13
            })
        })

        // 全局事件监听
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        let moveend;
        let resolution;

        // 移入三维
        handler.setInputAction(function (event) {
            open3d()
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        // 移入二维
        map.on('pointermove', function (evt) {
            open2d()
        })

        // 关闭之前所有事件
        function closeO() {
            try {
                ol.Observable.unByKey(moveend)
                ol.Observable.unByKey(resolution)
            } catch (error) { }
            try {
                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP)
                handler.removeInputAction(Cesium.ScreenSpaceEventType.WHEEL)
            } catch (error) { }
        }

        // 进入3d，监听3d事件
        function open3d() {
            closeO()
            handler.setInputAction(function (event) {
                liandong3D2D()
            }, Cesium.ScreenSpaceEventType.WHEEL)
            handler.setInputAction(function (event) {
                liandong3D2D()
            }, Cesium.ScreenSpaceEventType.LEFT_UP)
        }

        // 进入2d，监听2d事件
        function open2d() {
            closeO()
            moveend = map.on('moveend', function (evt) {
                liandong2D3D()
            })
            resolution = map.getView().on('change:resolution', function () {
                liandong2D3D()
            })
        }

        // 3d联动2d
        function liandong3D2D() {
            var rectangle = viewer.camera.computeViewRectangle()
            var west = (rectangle.west / Math.PI) * 180
            var north = (rectangle.north / Math.PI) * 180
            var east = (rectangle.east / Math.PI) * 180
            var south = (rectangle.south / Math.PI) * 180
            map.getView().fit([west, south, east, north], map.getSize())
        }

        // 2d联动3d
        function liandong2D3D() {
            var xy = map.getView().calculateExtent(map.getSize())
            viewer.scene.camera.setView({
                destination: Cesium.Rectangle.fromDegrees(xy[0], xy[1], xy[2], xy[3]),
                orientation: {
                    heading: 0.049106700935120706,
                    pitch: -1.560509974137843,
                    roll: 0
                }
            })
        }
    </script>
</body>

</html>